<template>
	<div>
		<el-row>
			<el-col :span="24">
				<div
					style="
						margin-left: 1vw;
						margin-top: 12vh;
						margin-bottom: 3vh;
					"
				>
					<el-text type="primary" tag="del">选择您的性别：</el-text>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<div>
					<el-radio-group
						v-model="gender"
						style="
							display: flex;
							justify-content: space-between;
							margin: 0 8vw;
						"
					>
						<el-radio label="男" size="large">男</el-radio>
						<el-radio label="女" size="large">女</el-radio>
						<el-radio label="Robot" size="large">Robot</el-radio>
					</el-radio-group>
				</div>
			</el-col>
		</el-row>
		<el-row style="margin-top: 30vh">
			<el-col :span="24">
				<el-button
					type="success"
					size="large"
					style="width: 100%"
					@click="submitSex"
					>上传至服务器</el-button
				>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

let gender = ref('Robot');
let username = localStorage.getItem('username');
const submitSex = async () => {
	if (username) {
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/updateUserSex',
				method: 'post',
				data: {
					username,
					gender: gender.value,
				},
			});
			if (res.data.state === 'ok') {
				ElNotification({
					title: 'Success',
					message: '修改性别成功',
					type: 'success',
				});
				return location.reload();
			} else {
				ElNotification({
					title: 'Warning',
					message: '修改性别失败',
					type: 'Warning',
				});
				return location.reload();
			}
		} catch (error) {
			console.log(error);
			ElNotification({
				title: 'Danger',
				message: '服务器错误',
				type: 'danger',
			});
			return location.reload();
		}
	} else {
		ElNotification({
			title: 'Warning',
			message: '您似乎还没有登录呢',
			type: 'warning',
		});
		return router.push('/');
	}
};
</script>

<style scoped></style>
